<template>
	<view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="index-content">
				<block v-for="(item,index) in list" :key="index">
				<view class="video-content" @tap="goto_teach_detail(item)">
					<img :src="item.image" class="video-content-img" />
					<view class="video-content-flex">
						<view>
							<view class="video-content-h1">{{item.name}}</view>
						</view>
						<view class="video-content-learn">
							<view class="video-content-price"><view>已有{{item.study_num}}人学习</view></view>
						</view>
					</view>
				</view>
			</block>
				</view>
			</mescroll-body>
		<right-menu></right-menu>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
	import rightMenu from '@/components/right-menu';

export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				use: false, // 是否启用下拉刷新; 默认true
				auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0,
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			// 列表数据
			list: []
		};
	},
	onShow() {
	},
	computed: {
		...mapState(['userInfo']),
	},
	components: {rightMenu},
	methods: {
		/*上拉加载的回调*/ //赛事新闻列表
		async upCallback(page,item) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条

			let res = await this.$lib.$http.post({
				url:this.$lib.$urlMap.teacher,
				data: {
					page: pageNum,
					limit: pageSize
				},
				needLogin:true
			})
			if (res.code == 1) {
				this.personList = res.data.data;
				// 接口返回的当前页数据列表 (数组)
				let curPageData = res.data.data;
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length;
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// let totalPage = data.xxx;
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.total;

				this.mescroll.endBySize(curPageLen, totalSize);
				if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
				this.list = this.list.concat(curPageData); //追加新数据
				/* for (let i = 0, leng = this.personList.length; i < leng; i++) {
					this.personList[i].pay_time = this.$myUtils.formatDate(this.personList[i].pay_time * 1000, 'Y年M月D日 h:m:s')
				} */
			} else {
				this.mescroll.endErr()
			}
		},
		goto_teach_detail (item) {
			uni.navigateTo({
				url: '/pages/index/teachDetail?id=' + item.id
			})
		}
	}
};
</script>
<style>
page {
	background: #fff;
}
.index-content {
	padding-top: 8px;
	width: 96%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.index-box img {
	width: 166px;
	height: 61px;
	margin-right: 8px;
}
/*课程列表*/
.index-content .video-content {
	margin-bottom: 13px;
	display: flex;
	align-items:center;
	box-shadow: 0 2px 8px rgba(117, 117, 117, 0.25);
	margin: 8px;
	padding: 16px;
	border-radius: 3px;
	margin-bottom: 20px;
}
.index-content .video-content:last-child {
	margin-bottom: 0;
}
.video-content-img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.video-content-flex {
	display: flex;
	flex-direction: column;
	align-items: start;
	text-align: left;
	flex: 1;
	padding-left: 14px;
	height: 52px;
	justify-content: space-between;
}
.video-content-h1 {
	color: #000;
	font-size: 16px;
	line-height: 20px;
	padding-bottom: 4px;
}
.video-content-learn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}
.video-content-price {
	color: #0081ff;
	font-size: 14px;
	display: flex;
	align-items: center;
}
</style>
